<template>
  <div style="width:100vw;" class="patent-box">
    <!-- <div class="record-header">
      <mt-header fixed title="审批列表">
        <router-link to="/StudyCenter" slot="left">
          <mt-button class="back-butt" icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>-->

    <div>
      <mt-navbar fixed v-model="active">
        <mt-tab-item id="isRead_0">未读</mt-tab-item>
        <mt-tab-item id="isRead_1">已读</mt-tab-item>
      </mt-navbar>
      <div class="page-tab-container">
        <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
          <mt-tab-container-item id="isRead_0">
            <div style="height:92vh;" class="bscroll" ref="applying">
              <div :style="loadedDown ? 'padding-bottom:0;' : ''" class="bscroll-container">
                <div class="default-page-box" v-show="applying.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <!-- <div v-show="loadingUp" style="padding:25px 10px 10px;text-align:center;">
                  <mt-spinner type="snake"></mt-spinner>
                </div>-->
                <div
                  @click="goDetail(item.id)"
                  v-for="(item,index) in applying"
                  :key="index"
                  class="patent-body"
                >
                  <div class="parent-body-item">
                    <div class="class-content">
                      <p class="content-tip">{{item.title}}</p>
                      <p
                        style="margin:0.22rem 0;font-size:0.34rem;"
                        class="content-bumen"
                      >内容：{{item.content || '暂无'}}</p>
                      <div style="justify-content:space-between;" class="flex-row">
                        <p style="margin-top:0;" class="content-teacher">
                          <span
                            style="color:#4787e4;margin-right:5px;"
                            class="iconfont iconxingming"
                          ></span>
                          发布人：{{item.sendUser}}
                        </p>
                        <p style="margin-bottom:0;" class="content-time">时间：{{item.msgTime}}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-show="loadingDown" style="padding:10px;text-align:center;">
                  <mt-spinner type="snake"></mt-spinner>
                </div>
                <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
              </div>
            </div>
            <!-- <div style="text-align:center;" v-show="allLoaded">没有更多数据</div> -->
            <!-- </mt-loadmore> -->
          </mt-tab-container-item>
          <mt-tab-container-item id="isRead_1">
            <!-- cell组件 -->
            <div style="height:92vh;" class="bscroll" ref="applyed">
              <div :style="loadedDown ? 'padding-bottom:0;' : ''" class="bscroll-container">
                <div class="default-page-box" v-show="applyed.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div v-show="loadingUp" style="padding:25px 10px 10px;text-align:center;">
                  <mt-spinner type="snake"></mt-spinner>
                </div>
                <div
                  @click="goDetail(item.id)"
                  v-for="(item,index) in applyed"
                  :key="index"
                  class="patent-body"
                >
                  <div class="parent-body-item">
                    <div class="class-content">
                      <p class="content-tip">{{item.title}}</p>
                      <p
                        style="margin:0.22rem 0;font-size:0.34rem;"
                        class="content-bumen"
                      >内容：{{item.content || '暂无'}}</p>
                      <div style="justify-content:space-between;" class="flex-row">
                        <p style="margin-top:0;" class="content-teacher">
                          <span
                            style="color:#4787e4;margin-right:5px;"
                            class="iconfont iconxingming"
                          ></span>
                          发布人：{{item.sendUser}}
                        </p>
                        <p style="margin-bottom:0;" class="content-time">时间：{{item.msgTime}}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-show="loadingDown" style="padding:10px;text-align:center;">
                  <mt-spinner type="snake"></mt-spinner>
                </div>
                <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
              </div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
const easydate = require("../../untils/easydate");
export default {
  name: "testUI",
  data() {
    return {
      active: "isRead_0",
      allLoaded: false,
      pageTotal: "",
      loadingDown: false,
      loadingUp: false,
      loadedDown: false,
      params: {
        isRead: 0, //0未读  1已读
        pageNum: 1,
        pageSize: 10
      },
      applying: [], // 待审核
      applyed: [] // 审批成功
    };
  },
  mounted() {
    let { params } = this;
    this.applying = [];
    this.$get("message_list", params, false).then(res => {
      if (res.success) {
        this.applying = res.data.rows;
        this.pageTotal = res.data.total;
        this.initScroll("applying");
        this.initScroll("applyed");
      }
    });
    // 设置标题
    setText("消息");
  },
  watch: {
    active(oldVal, newVal) {
      this.applying = [];
      this.applyed = [];
      let oldVals = oldVal.split("_")[1];
      this.params.pageSize = 10;
      this.params.pageNum = 1;
      this.allLoaded = false;
      this.loadedDown = false;
      if (oldVals == 0) {
        this.params.isRead = 0;
        this.classFunction(this.params, "applying");
      } else if (oldVals == 1) {
        this.params.isRead = 1;
        this.classFunction(this.params, "applyed");
      }
    }
  },
  methods: {
    initScroll(dom) {
      let that = this;
      that.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        let bScroll = new BScroll(bscrollDom, {
          click: true,
          probeType: 2,
          bounceTime: 700, //回弹时间
          pullUpLoad: {
            threshold: 0, // 当上拉距离超过50px时触发 pullingUp 事件
            stop: 50
          },
          useTransition: false // 防止iphone微信滑动卡顿
        });
        // bScroll.on("pullingDown", () => {
        //   that.loadingUp = true;
        //   that.loadedDown = false;
        //   that.params.pageNum = 1;
        //   setTimeout(() => {
        //     that.classFunction(that.params, dom, "downLoad");
        //   }, 1000);
        //   bScroll.finishPullDown();
        // });
        bScroll.on("pullingUp", () => {
          let { pageTotal } = that;
          console.log(pageTotal);
          if (that[dom].length < pageTotal) {
            that.loadingDown = true;
            that.params.pageNum++;
            setTimeout(() => {
              that.classFunction(that.params, dom, "upLoad");
            }, 1000);
          } else {
            that.loadedDown = true;
          }
          bScroll.finishPullUp();
        });
        bScroll.refresh();
      });
    },
    // 课程状态请求
    classFunction(params, applyStatus, load) {
      let that = this;
      that.$get("message_list", params).then(res => {
        if (res.success) {
          that.pageTotal = res.data.total;
          if (load == "upLoad") {
            that[applyStatus] = that[applyStatus].concat(res.data.rows);
          } else {
            that[applyStatus] = res.data.rows;
          }
          that.loadingDown = false;
          that.loadingUp = false;
        } else {
          that.loadingDown = false;
          that.loadingUp = false;
        }
      });
    },
    goDetail(id) {
      this.$router.push({
        path: "/messageDetail",
        query: { id: id }
      });
    },
    loadBottom() {
      this.params.pageNum++;
      this.classFunction(this.params, "applying");
    }
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/my-class.less");
.bscroll-container {
  padding-bottom: 50px;
}
.content-tip {
  width: 500/75rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}

.item {
  display: inline-block;
}

.nav {
  padding: 10px;
}

.link {
  color: inherit;
  padding: 20px;
  display: block;
}
// .mint-navbar.is-fixed {
//   top: 40px;
// }
.page-tab-container {
  padding-top: 49px;
}
.mint-navbar .mint-tab-item.is-selected {
  border-width: 1px;
}
</style>